import {
  Button,
  Cascader,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Select,
  SelectOption,
  Space,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import { riverApi } from '@/apis'
import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { systemInfo } from '@/apis/aiTestSkinTypes'
import { getAreaOptions, isValueEmpty } from '@/utils'

export default defineComponent({
  name: 'RvAddress',
  setup() {
    const data = ref({
      testFrequency: null,
      testNumber: null
    } as systemInfo)
    const loading = ref(false)
    const confirmLoading = ref(false)
    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      try {
        loading.value = true
        const config = await aiTestSkinApi.getSystemSettings()
        if (config) {
          data.value = config
        }
      } finally {
        loading.value = false
      }
    }

    //保存
    async function handleSave() {
      if (isValueEmpty(data.value.testFrequency)) {
        console.log(data.value.testFrequency)
        message.error('请输入分析维度')
        return
      }

      if (isValueEmpty(data.value.testNumber)) {
        message.error('请输入测量次数')
        return
      }

      try {
        confirmLoading.value = true

        const updatedData = { ...data.value }
        await aiTestSkinApi.editSystemSettings({
          testFrequency: updatedData.testFrequency,
          testNumber: updatedData.testNumber
        })

        data.value = updatedData // 更新data对象的值
        message.success('保存成功')
      } finally {
        confirmLoading.value = false
      }
    }

    return {
      data,
      loading,
      confirmLoading,
      handleSave
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginTop: '20px' }}
        >
          <FormItem label="分析维度:" required>
            <Select
              placeholder="请输入"
              v-model:value={this.data.testFrequency}
              style={{ width: '250px' }}
            >
              <SelectOption value={1}>每天</SelectOption>
              <SelectOption value={2}>每周</SelectOption>
              <SelectOption value={3}>每月</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="每人测量次数" wrapperCol={{ span: 6 }} required>
            <Space>
              <InputNumber
                v-model:value={this.data.testNumber}
                placeholder="请输入"
                style={{ width: '300px' }}
              />
              <span>次</span>
            </Space>
          </FormItem>
          <Divider></Divider>
          <FormItem label=" " colon={false}>
            <Button
              loading={this.confirmLoading}
              type="primary"
              onClick={this.handleSave}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
